<template>
	<view class="zxc_centent">
		<view class="big_box">
			
			<!-- 服务门店  -->
			
			<!--兼职技师下单可以选择服务门店 -->
			<view class="tp" v-if="jishiuserType ==1">
				<view class="tp_no" @click="open2">
					<image src="../../static/images/bai_address.png" mode="widthFix" class="no_bai_address_img"></image>
					选择服务门店
				</view>
			</view>
			<!-- end -->
			
			<view class="tp" v-else>
						<view class="tp_you">
							<view class="tp_you_left">
								<image src="../../static/images/bai_address.png" mode="widthFix" class="you_bai_address_img"></image>
							</view>
							<view class="tp_you_right">
								<view class="tp_you_right_sm">
									门店联系人：李小姐  15088881548
								</view>
								<view class="tp_you_right_sm_text">
									<text style="width:75%">门店地址：东莞市南城区元美西路2号东莞市南城区元美西路2号</text>
									<text class="ikd" style="margin-left:40upx;" @click="copy('东莞市南城区元美西路2号东莞市南城区元美西路2号')">复制</text>
								</view>
							</view>
						</view>
					</view>
					<!-- end -->
					
			
					
	
			<view class="info">
				
				<view class="info_tp">
					<image src="../../static/images/anmo.png" class="info_tp_left" mode="widthFix"></image>
					<view class="info_tp_right">
						<view class="tit">古法推拿</view>
						<view class="info_tp_right_bt">
							<view class="info_money">项目价格:￥666</view>
							<view class="info_money">会员价格:￥219</view>
							<view>
								<!-- <u-number-box v-model="value" @change="valChange"></u-number-box> -->
							</view>
						</view>
					</view>
				</view>
				<!-- end -->
				<view class="label" v-if="!proType !=0">
					<view class="label_left">
						服务技师
					</view>
					<view class="label_right">
						彩迷
					</view>
				</view>
				
				<view class="label" v-if="!proType !=0">
					<view class="label_left">
						服务时间
					</view>
					<view class="label_right" style="color:#07c160">  
						<text>2022.12.15 15:30</text>
					</view>
				</view>
				
				<view class="car_view" v-if="jishiuserType ==1">
					<view class="car_view_left">
						技师出行方式
					</view>
					<view class="car_view_right">
						<view class="car_text">滴滴/出租</view>
					</view>
				</view>
				<view class="car_asd" v-if="jishiuserType ==1">
					全程共2.19公里，出租出行收取来回车费，白天起步10元 超过3公里每公里增加2元。
				</view>
				
				<view class="label" v-if="jishiuserType ==1">
					<view class="label_left">
						车费
					</view>
					<view class="label_right" style="color: #ff6c00;">
						￥40
					</view>
				</view>
				
				<view class="label">
					<view class="label_left">
						优惠劵
					</view>
					<view class="label_right" style="color: #ff6c00;" @click="open3">
						<text v-if="select_quan">{{select_quan}}</text>
						<text v-else>选择优惠券</text>
						<image src="../../static/images/hei_right.png" mode="widthFix" style="width:15upx;margin-left:15upx"></image>
					</view>
				</view>
				
				<view class="label">
					<view class="label_left">
						备注
					</view>
					<view class="label_right" style="display: flex;align-items: center;" @click="open1">
						<view> 
						<text v-if="selectbeizhu" class="ujdx">{{selectbeizhu}}</text>
						<text v-else>添加备注</text>
						</view>
						<image src="../../static/images/hei_right.png" mode="widthFix" style="width:15upx;margin-left:15upx"></image>
					</view>
				</view>
			</view>
			<!-- end -->
			
			<view class="jcn">支付方式</view>
			<view class="pay_view">
			 <u-radio-group
			    v-model="radiovalue1"
			    placement="column"
			    @change="groupChange"
				iconPlacement="right"
				activeColor="#07c160"
			  >
			    <u-radio
			      :customStyle="{marginBottom: '8px'}"
			      v-for="(item, index) in radiolist1"
			      :key="index"
			      :label="item.name"
			      :name="item.name"
			    >
			    </u-radio>
			  </u-radio-group>
			</view>
			
		</view>
		<!-- end -->
		<view class="end">
	<!-- 		<view class="end_left">
			合计：<text class="end_money">￥536.22</text>
			</view> -->
			<view class="end_right" @click="pay()" style="width:100%;">
				立即支付
			</view>
		</view>
		
		<!-- pop 1 备注-->
			<u-popup :show="show1" @close="close1" :round="10" :closeable="true">
		            <view class="bei_view">
						<view style="font-size:30upx;text-align: center;">请输入备注，以便更好的为您服务</view>
		                <u--textarea v-model="selectbeizhu" placeholder="请输入内容"  count class="textarea" ></u--textarea>
						<view class="bei_btn">保存</view>
		            </view>
			</u-popup>
			
		<!-- pop 1 备注-->
			<u-popup :show="show2" @close="close2" :round="10" :closeable="true">
		            <view class="bei_view">
						<view style="font-size:30upx;text-align: center;">选择服务门店</view>
						<view style="height: 40vh;overflow-y: auto;">
						<view class="list">
									  <view class="list_left" @click="nav2">
										  <image src="http://192.168.1.4:9000/hotel/2023/07/19/ffe9903d46a04cae9a90fd9f13e53fe7.png" class="list_img" mode="widthFix"></image>
									  </view>
									  <view class="list_right">
									  			<view class="list_right_left">
													<view class="title">
														白金汉宫足浴店
													</view>
													<view class="text">
														<image src="../../static/images/ico-addr.png" mode="widthFix" style="width: 30upx;margin-right:10upx"></image>
														距您3km
													</view>
													<view class="text">
														地址：广东省东莞市山沟沟村
													</view>
												</view> 
												<view class="list_right_right">
														选择门店
												</view> 
									  </view>
						</view>
						</view>
		            </view>
			</u-popup>
	
		
		<!-- pop 3 优惠券 -->
			<u-popup :show="show3" @close="close3" :round="10" :closeable="true">
		            <view class="quan_view">
		               	<view style="font-size:30upx;text-align: center;">选择优惠券</view>
						<view class="quan_list_view">
						<view class="quan_list">
							<view class="quan_list_left">
								<view class="quan_list_left_tit">¥120</view>
								<view class="quan_list_left_text">满299元可用</view>
							</view>
							<view class="quan_list_right">
								<view class="quan_list_right_left">
									<view class="quan_tit">120元现金券</view>
									<view class="quan_text">有效期至：2022-12-23</view>
								</view>
								<view class="quan_list_right_right">
									使用
								</view>
							</view>
						</view>
						</view>
		            </view>
			</u-popup>
			
			<!-- pop 4 输入支付密码 -->
			<u-popup :show="show4" @close="close4" :round="10" :closeable="true" mode="center">
				<view class="rechange_view">
					<view style="font-size:30upx;text-align: center;">请输入密码</view>
					
					<!-- 有密码 -->
					<view style="position: relative;height:80upx;display: flex;align-items: center;">
						<input :password="password1" v-model="rechargepassword" placeholder="请输入" placeholder-style="font-size:26upx" class="ujes"/>
						<image src="../../static/images/close_eye.png" mode="widthFix" v-if="password1" @click="closepassword1" class="eye_img"></image>
						<image src="../../static/images/open_eye.png" mode="widthFix" v-else  @click="openpassword1" class="eye_img"></image>
					</view>
					
					<!-- 无密码 -->
	<!-- 				<navigator url="/pagesB/set/changepaypasswordone" hover-class="none" style="color:rgb(255, 108, 0);text-align: center;padding-top:30upx;font-size:28upx">
						暂未设置支付密码，点击去设置
					</navigator> -->
					
					<view class="bei_btn" @click="rechargepay()" style="margin-top:50upx;">确定</view>
				</view>
			</u-popup>
		
	</view>
</template>

<script>
	export default {
		data (){
			return {
				jishiuserType:'',  //0在店技师  1兼职技师   兼职技师可以选择服务门店
				proType:0,  //0技师项目  1 非技师项目
				password1:true,
				value: 0,
				show1: false,
				show2: false,
				show3: false,
				show4: false,
				selectbeizhu:'',
				select_quan:'',
				    radiolist1: [
				            {
				              name: '微信支付',
				              disabled: false
				            },
				            {
				              name: '支付宝支付',
				              disabled: false
				            },
							{
							  name: '按摩套餐卡支付',
							  disabled: false
							},
							{
							  name: '自由充值卡支付',
							  disabled: false
							},
				          ],
				          // u-radio-group的v-model绑定的值如果设置为某个radio的name，就会被默认选中
				          radiovalue1: '账户余额',
				rechargepassword:'',  //账户余额支付密码
			}
		},
		onLoad(option){
			console.log(option)
			
			this.jishiuserType=option.jishiuserType;  
			this.proType=option.proType; 
		},
		onShow (){
			
		},
		methods:{
			    open1() {
			        this.show1 = true;
			      },
			      close1() {
			        this.show1 = false;
			      },
				  open2() {
				      this.show2 = true;
				    },
				    close2() {
				      this.show2 = false;
				    },
				  open3() {
				      this.show3 = true;
				    },
				    close3() {
				      this.show3 = false;
				    },
					close4() {
					  this.show4 = false;
					},
			closepassword1(){
				this.password1=false;
			},
			openpassword1 (){
				this.password1=true;
			},
			valChange(e) {
							console.log('当前值为: ' + e.value)
						},
			 groupChange(n) {
			        console.log('groupChange', n);
					this.radiovalue1=n
			      },
			pay (){
				console.log(this.radiovalue1)
			
				if(this.radiovalue1 == '按摩套餐卡支付'){
					this.show4=true;
				}
				if(this.radiovalue1 == '自由充值卡支付'){
					this.show4=true;
				}
			},
			copy (item){
				uni.setClipboardData({
					data:item
				});
				uni.showToast({
					title:'成功'
				})
			},
			rechargepay (){  //账户余额支付
				this.show4=false;
			}
		}
	}
</script>

<style>
	::v-deep .u-radio-label--right{
		margin-top:20upx;
	}
	.zxc_centent{
		padding-bottom:100upx;
	}
	.big_box{
		width:95%;
		margin:0 auto;
	}
	.tp{
		width:100%;
		background-color: #07c160;
		border-radius: 10upx;
		color: #fff;
		font-size:28upx;
		padding:20upx 0;
	}
	.tp_no{
		height: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.no_bai_address_img{
		width:30upx;
		margin-right: 20upx;
	}
	.tp_you{
		height: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
	.tp_you_left{
		width:15%;
		text-align: center;
	}
	.you_bai_address_img{
		width:30upx;
	}
	.tp_you_right{
		width:85%;
	}
	.tp_you_right_sm_text{
		margin-top:20upx;
		position: relative;
		display: flex;
		align-items: center;
	}
	.ujes{
		margin-top:50upx;
		width:90%;
		padding-left:5%;
		padding-right:5%;
		height:70upx;
		border:2upx solid #ededed;
		border-radius: 10upx;
	}
	.eye_img{
		width:35upx;
		position: absolute;
		right:20upx;
		top:55upx;
	}
	.bai_right_img{
		width: 15upx;
		position: absolute;
		right:20upx;
	}
	.info{
		padding:30upx;
		background-color: #fff;
		margin-top:20upx;
		border-radius: 10upx;
		font-size:28upx;
	}
	.info_tp{
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
	.info_tp_left{
		width:20%;
		border-radius: 10upx;
	}
	.info_tp_right{
		width:75%;
	}
	.tit{
		font-weight: 700;
		font-size:30upx;
	}
	.info_tp_right_bt{
		display: flex;
		align-items: center;
		margin-top:20upx;
	}
	.info_money{
		color:#ff6c00;
		font-size:28upx;
		margin-right:20upx;
	}
	.label{
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-top:30upx;
	}
	.car_view{
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-top:20upx;
		border-top:2upx solid #ededed;
		padding:20upx 0;
	}
	.car_text{
		background-color: #07c160;
		border-radius: 5upx;
		color: #fff;
		font-size: 22upx;
		padding:10upx 20upx;
	}
	.car_asd{
		color:#999;
		font-size:24upx;
	}
	.end{
		height:100upx;
		width:100%;
		background-color: #fff;
		position: fixed;
		bottom:0;
		left:0;
		z-index: 99;
		display: flex;
		align-items: center;
		justify-content: space-between;
		border-bottom:1px solid #ededed;
		font-size:30upx;
	}
	.end_money{
		color: #ff6c00;
		font-size:33upx;
	}
	.end_left{
		  
	}
	.end_right{
			height:100%;
		    background-color: #07c160;
			color:#fff;
			padding:0 20upx;
			width:200upx;
			text-align: center;
			line-height: 100upx;
	}
	.jcn{
		font-size:26upx;
		margin:20upx 0;
	}
	.pay_view{
		padding:15upx 30upx;
		background-color: #fff;
		border-radius: 10upx;
		font-size:28upx;
	}
	.ikd{
		white-space: nowrap;
		margin-left:40upx;
		background-color: #fff;
		border-radius: 5upx;
		color: #07c160;
		padding:5upx 15upx;
	}
	.bei_view{
		padding:30upx;
	}
	.textarea{
		height: 300upx;
		margin-top:30upx;
	}
	.bei_btn{
		    background-color: #07c160;
		    border-radius: 10upx;
		    color: #fff;
			font-size:30upx;
			text-align: center;
			margin:30upx 0 0;
			padding:20upx 0;
	}
	
	.quan_view{
		padding:30upx;
	}
	.quan_list_view{
		padding:30upx;
		height:40vh;
		overflow-y: auto;
	}
	.quan_list{
		height:185upx;
		margin-top:20upx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		background-image: url('/static/images/you_quan.png');
		background-repeat: no-repeat;
		background-size: 100%;
	}
	.quan_list_left{
		width:32%;
		height:100%;
		color:#fff;
		font-size:24upx;
		display: flex;
		align-items: center;
		flex-wrap: wrap;
		justify-content: center;
	}
	.quan_list_left_tit{
		font-size:28px;
		margin-top:10upx;
	}
	.quan_list_left_text{
		margin-top:-70upx;
	}
	.quan_list_right{
		width:68%;
		height:100%;
		background-color: #fff;
		border:2upx solid #ededed;
		border-radius: 0 10upx 10upx  0;
		border-left:none;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
	.quan_list_right_left{
		width:60%;
		font-size:24upx;
		color:#666;
		padding-left:6%;
	}
	.quan_tit{
		color:#000;
		font-size:33upx;
		margin-bottom:10upx;
	}
	.quan_list_right_right{
		color:#11c366;
		border:2upx solid #11c366;
		border-radius: 100upx;
		padding:5upx 40upx;
		font-size:26upx;
		margin-right:20upx;
		white-space: nowrap;
	}
	
	.time_view{
		padding:30upx;
		height:40vh;
		overflow-y: auto;
	}
	.ujdx{
		display:block;
		width:300upx;
		overflow-x: auto;
		text-align: right;
		white-space: nowrap;
	}
	.rechange_view{
		padding:30upx;
		width:65vw;
	}
	.list{
		padding:20upx;
		border-bottom:1upx solid #ededed;
		display: flex;
		align-items: center;
		justify-content: space-between;
		background-color: #fff;
	}
	.list_left{
		width: 25%;
	}
	.list_img{
		width: 100%;
		border-radius: 10upx;
	}
	.list_right{
		width: 72%;
		display: flex;
		align-items: center;
		justify-content: space-between;
		position: relative;
	}
	.list_right_left{
		width: 100%;
		color:#999;
		font-size:24upx;
	}
	.title{
		font-size:30upx;
		font-weight: 700;
		color:#000;
	}
	.text{
		margin-top:20upx;
		display: flex;
		align-items: center;
	}
	.money{
		color:#ff6c00;
		font-size:30upx;
		font-weight: 700;
		margin-right:10upx;
	}
	.list_right_right{
		    background-color: #07c160;
		    color: #fff;
			border-radius: 100upx;
			font-size:24upx;
			white-space: nowrap;
			padding:10upx 20upx;
			position: absolute;
			right:0;
			z-index: 9;
	}
</style>